<template>
  <el-card class="card">
    <div class="title">{{ title }}</div>
    <div class="number">{{ number }}</div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="footer">
      <slot name="footer"> </slot>
    </div>
    <!-- <v-slot> </v-slot>
    <v-slot name="footer"> </v-slot> -->
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XTopView",
};
</script>

<script lang="ts" setup>
defineProps<{
  title: string;
  number: string;
}>();
</script>

<style scoped>
.title {
  color: #9999a6;
  font-size: 12px;
}
.number {
  font-size: 24px;
  color: #303133;
  margin: 5px 0px 5px 0px;
}
.content {
  height: 50px;
  width: 100%;
  font-size: 14px;
}
.footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid #eeeeee;
  color: #666;
  font-size: 14px;
}
.card {
  /* height: 200px; */
}
</style>
